<template>
	<view class='recentchat-wrapper'>
	  <view v-if="chatList.length == 0" class='no-recent'>
	    <!-- <image src="../../../static/img/afterchat.png" class='no-recent-image'></image> -->
	    <text class='no-recent-text'>暂无会话内容</text>
	  </view>
	 <view v-if="chatList.length != 0" >
		 <block v-for="(item,index) in chatList" :key="index" >
		 	<view class="content-view" @click="gotofriend(index)">
		 		<view class="content-img" >
					<image src="../../../static/img/my.png" mode="widthFix"></image>
		 		</view>
		 		<view class="content-title">
		 			<text class="conteng-take">{{item.faccid}}</text>
		 			<view class="conteng-information">
		 				<text>{{item.ex}}</text>
		 			</view>
		 		</view>
		 	</view>
		 </block>
	  </view>
	</view>
</template>


<script>
	export default {
		data(){
			return{
				chatList:[]
			}
		},
		created() {
			this.getfriendlist()
		},
		onShow(){
			this.getfriendlist()
		},
		methods:{
			// 获取好友关系列表
			async getfriendlist(){
				let data = this.accid
				let res = await this.$api.getFriendList(data);
				// console.log(res.data.friends)
				this.chatList = res.data.friends
				console.log(this.chatList)
			},
			// 去往好友窗口信息页面
			gotofriend(data){
				// console.log(this.chatList[data].faccid)
				let friendaccid = this.chatList[data].faccid
				this.$store.dispatch('getfriendaccid',friendaccid)
				uni.navigateTo({
					url:'/pages/friendinfo/friendinfo'
				})
			}
		},
		computed:{
			accid(){
				return this.$store.state.userinfo.accid
			}
		}
	}
	
</script>

<style scoped>
	.recentchat-wrapper {
	  width: 100%;
	  padding: 0 22rpx;
	  box-sizing:border-box;
	  background-color: #fff;
	  min-height: 100%;
	  overflow-x: hidden;
	  overflow-y: scroll;
	}
	.recentchat-wrapper:first-child {
	  border-top: 1px solid rgba(220,220,220,0.5);
	}
	.no-recent {
	  width:100%;
	  position: fixed;
	  top: 20%;
	  color: #ccc;
	  display:flex;
	  flex-direction:column;
	  justify-content:center;
	  align-items:center;
	  margin-left: -20rpx;
	}
	.no-recent-image {
	  width:550rpx;
	  height:200rpx;
	  margin-bottom:40rpx;
	}
	.no-recent-text {
	  width:100%;
	  text-align:center;
	}
    .content-view text{
		display: block;
	}
	.content-view{
		display: flex;
		justify-content: space-between;
		height: 150rpx;
		overflow: hidden;
		border-bottom: 1rpx solid #E4E8EF;
		padding-bottom:5rpx;
		margin: 30rpx 0;
		color: #898989;
	}
	.content-img{
		width: 100%;
		height: 150rpx;
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
	}
	.content-img image{
		width: 200rpx;
		height: 150rpx;
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
	}
	.content-title{
		width: 100%;
		padding-left: 10rpx;
		font-size: 24rpx;
	}
	.conteng-take{
        color: #333333;	
        height: 50rpx;
        font-size: 33rpx;
        font-weight: bold;
        line-height: 50rpx;
	}
	
</style>
